// ============================================================================
// SerialMessageView.qml —— 串口数据消息显示区（白色面板，蓝色边框）
// ----------------------------------------------------------------------------
// 功能说明：
//  - 白色显示框可自定义宽高，并有蓝色边框
//  - 内部显示“发送/接收”消息，带时间戳和颜色区分
//  - 不包含输入框或发送逻辑；外部通过 appendMessage(type, text) 添加消息
//  - 自动滚动到底部，始终显示最新消息
// ============================================================================

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Item {
    id: root

    // -----------------------------
    // 可自定义面板宽高
    // -----------------------------
    property int panelWidth: 300
    property int panelHeight: 300
    property int panelPadding: 8  // 内边距，可灵活调整

    width: panelWidth
    height: panelHeight

    // -----------------------------
    // 外部接口（添加消息）
    // -----------------------------
    function appendMessage(type, text) {
        if (text === undefined || text === null) text = "" // 安全保护

        messageModel.append({
            "type": type,
            "text": text,
            "timestamp": Qt.formatTime(new Date(), "hh:mm:ss")
        })

        // 自动滚动到底部
        listView.positionViewAtEnd()
    }


    // 外部接口（清空消息）
    function clearMessages() {
        messageModel.clear()
        listView.positionViewAtBeginning()
    }

    // -----------------------------
    // 白色面板（带蓝色边框）
    // -----------------------------
    Rectangle {
        id: panel
        width: root.panelWidth
        height: root.panelHeight
        anchors.centerIn: parent
        color: "white"
        radius: 8
        border.color: "#2196F3" // 蓝色边框
        border.width: 2

        // 内部内容容器，用于控制 padding
        Item {
            id: inner
            anchors.fill: parent
            anchors.margins: root.panelPadding

            // -------------------------
            // 数据模型
            // -------------------------
            ListModel { id: messageModel }

            // -------------------------
            // ListView：显示消息
            // -------------------------
            ListView {
                id: listView
                anchors.fill: parent
                model: messageModel
                clip: true
                spacing: 6

                // 垂直滚动条
                ScrollBar.vertical: ScrollBar { }

                // delegate：消息显示样式
                delegate: Rectangle {
                    width: listView.width
                    height: textItem.implicitHeight + 12
                    radius: 6
                    border.width: 1
                    border.color: "#EAEAEA"
                    color: type === "send" ? "#E8F6FF" : "#FFF6E0"

                    RowLayout {
                        anchors.fill: parent
                        anchors.margins: 6
                        spacing: 8

                        // 时间戳
                        Text {
                            text: timestamp
                            color: "#777"
                            font.pixelSize: 12
                            width: 64
                            verticalAlignment: Text.AlignVCenter
                            elide: Text.ElideRight
                        }

                        // 消息正文
                        Text {
                            id: textItem
                            // 绑定 model.text，避免使用 text 属性名导致循环
                            property string messageText: model.text
                            text: (type === "send" ? "发送: " : "接收: ") + messageText
                            wrapMode: Text.Wrap
                            font.pixelSize: 14
                            color: "#222"
                            Layout.fillWidth: true
                        }
                    }
                } // end delegate
            } // end ListView
        } // end inner
    } // end panel
}
